import { CloseOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { forwardRef, RefObject, useImperativeHandle, useState } from 'react';

interface ImgScreenViewProps {
  url?: string;
  [key: string]: any;
}

const Index: any = (props: ImgScreenViewProps, ref: RefObject<any>) => {
  const [open, setOpen] = useState(false);
  const [url, setUrl] = useState('');

  useImperativeHandle(ref, () => ({
    show: (url: string) => {
      setOpen(true);
      setUrl(url);
    },
    close: () => {
      setOpen(false);
    },
  }));

  return (
    <>
      {open && (
        <div
          className={`w-[100vw] h-[100vh] left-0 top-0 z-[9999] flex  fixed bg-[rgba(0,0,0,.8)] transition-all ${
            open ? 'block' : 'none'
          }`}
        >
          <Button
            type="link"
            size='small'
            className="absolute top-[20px] right-[10px]"
            onClick={() => {
              setOpen(false);
            }}
          >
            <CloseOutlined />
          </Button>
          <img src={url} alt="" className="w-[100%] m-auto" />
        </div>
      )}
    </>
  );
};
export default forwardRef(Index);
